<template>
    <div>
        <div class="header">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="账号名称">
                    <el-input v-model="searchForm.account" placeholder="请输入账号名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAccount">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" prop="account">
            </el-table-column>
            <el-table-column label="等级" prop="level">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button size="small" @click="updateAccount(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增弹框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">

            <el-form :model="accountFrom" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input v-model="accountFrom.account" placeholder="请输入用户名称" clearable />
                </el-form-item>
                <el-form-item label="等级">
                    <el-input v-model="accountFrom.level" placeholder="请输入用户等级" clearable />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">
                        确认
                    </el-button>
                    <el-button type="primary" @click="updateAccountHandle" v-else>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
// 获取mock当中的api
import { getDataApi, deleteAccountApi, addAccountApi, updateAccountApi } from '../utils/mockServer/db'

import { ElMessage, ElMessageBox } from 'element-plus'

const { proxy: _this } = getCurrentInstance()


// 定义常量
const DEFAULTLEVEL = 1
// 弹框title
const DIALOGTITLEMAP = {
    0: '新增',
    1: '修改'
}

// 定义搜索表单内容
const searchForm = ref({
    account: ''
})

// 定义列表数据
const tableData = ref([])

// 弹框是否可见
const dialogVisible = ref(false)
// 弹框类型Map
const dialogTypeMap = ref({
    add: 0,
    modify: 1
})
// 当前的弹框类型, 默认的弹框类型是 新增
const dialogType = ref(dialogTypeMap.value.add)

const dialogTitle = computed(() => {
    return DIALOGTITLEMAP[dialogType.value]
})



// 账号表单
const accountFrom = ref({
    account: '',
    level: DEFAULTLEVEL,
    id: 0
})

// 获取全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
    // console.log(getDataApi({account}));
}

getData()

// 搜索操作
const handleSearch = () => {
    getData(searchForm.value.account)
}

// 新增操作
const showAddAccount = () => {
    dialogVisible.value = true
}

// 新增账号
const addAccount = () => {

    const { account, level } = accountFrom.value

    const accountObj = {
        account,
        level
    }


    // 调用新增账号接口
    addAccountApi(accountObj)

    // 提示用户，新增成功
    // ElMessage({
    //     type: 'success',
    //     message: '新增成功',
    // })
    _this.$message({
        type: 'success',
        message: '新增成功',
    })

    // 弹框消失
    resetAccountDialog()

    // 请求列表数据
    handleSearch()

}

// 修改操作
const updateAccount = (row) => {
    console.log('row', row);

    // 显示弹框
    dialogVisible.value = true
    // 将当前的弹框切换成修改弹框的类型
    dialogType.value = dialogTypeMap.value.modify

    // 数据回显
    const { account, level, id } = row
    accountFrom.value.account = account
    accountFrom.value.level = level
    accountFrom.value.id = id
}

// 修改操作，调用更新接口
const updateAccountHandle = () => {

    // 获取修改的account 表单

    // 调用更新接口
    updateAccountApi(accountFrom.value)
    // 提示成功
    // ElMessage({
    //     type: 'success',
    //     message: '修改成功',
    // })
    _this.$message({
        type: 'success',
        message: '修改成功',
    })
    // 复位
    resetAccountDialog()
    // 请求列表数据
    handleSearch()
}

// 删除操作
const deleteAccount = (row) => {
    console.log('row', row);

    // ElMessageBox.confirm(
    //     '是否要删除该账号',
    //     '警告',
    //     {
    //         confirmButtonText: '确认',
    //         cancelButtonText: '取消',
    //         type: 'warning',
    //     }
    // )
    //     .then(() => {
    //         // 调用后台接口，执行删除操作
    //         deleteAccountApi(row)

    //         ElMessage({
    //             type: 'success',
    //             message: '删除成功',
    //         })

    //         // 从新获取数据
    //         handleSearch()
    //     })
    //     .catch(() => {
    //         ElMessage({
    //             type: 'info',
    //             message: '删除取消',
    //         })
    //     })

    _this.$confirm(
        '是否要删除该账号',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用后台接口，执行删除操作
            deleteAccountApi(row)

            _this.$message({
                type: 'success',
                message: '删除成功',
            })

            // 从新获取数据
            handleSearch()
        })
        .catch(() => {
            _this.$message({
                type: 'info',
                message: '删除取消',
            })
        })


}

// 弹框复位操作
const resetAccountDialog = () => {
    dialogVisible.value = false

    // reset accountForm的数据
    accountFrom.value.account = ''
    accountFrom.value.level = DEFAULTLEVEL
}


</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>